<template>
	<view class="market-page">
		<view class="title">商城</view>
		<view class="main">
			<view class="search-box">
				<u-search placeholder="请输入您要搜索的饰品" @search="search" shape="square" :showAction="false"
					v-model="searchText" @blur="blur"></u-search>
				<!-- 筛选 -->
				<view class="sift" @click="openSift"></view>
			</view>
			<view class="list-box" v-if="listData.length>=1">
				<view class="list-item" v-for="(item,index) in listData" :key="index"
					@click="go_detailType(item,index)">
					<view class="image-box">
						<view class="img" :style="{ backgroundImage: 'url(' + item.itemIcon + ')' }"></view>
					</view>
					<view class="info">
						<view class="name">{{item.itemName}}</view>
						<view class="msg">
							<view class="price">￥{{item.consultPrice}}</view>
							<view class="num" v-if="item.num<1000">{{item.num}}件在售</view>
							<view class="num" v-else>1000+件在售</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list-box-none" v-else>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无数据">
				</u-empty>
			</view>
		</view>
		<tabbar current="1"></tabbar>
		<!-- 筛选弹窗 -->
		<u-popup :show="siftShow" mode="right" @close="siftClose" @open="siftOpen">
			<view class="siftBox">
				<view class="sift-top">类型
					<view class="back" @click="siftBack"></view>
				</view>
				<view class="sift-main">
					<view class="left">
						<!-- 外观 -->
						<view v-if="siftIndex==0" class="Exterior-box">
							<view :class="exteriorIndex==index?'active':''" v-for="(item,index) in exteriorList[1]"
								:key="index" @click="exteriorChange(item,index)">
								{{item}}
							</view>
						</view>
						<!-- 类别 -->
						<view v-if="siftIndex==1" class="Quality-box">
							<view :class="qualityIndex==index?'active':''" v-for="(item,index) in qualityList[1]"
								:key="index" @click="qualityChange(item,index)">
								{{item}}
							</view>
						</view>
						<!-- 品质 -->
						<view v-if="siftIndex==2" class="Rarity-box">
							<view :class="rarityIndex==index?'active':''" v-for="(item,index) in rarityList[1]"
								:key="index" @click="rarityChange(item,index)">
								{{item}}
							</view>
						</view>
						<!-- 分类 -->
						<view v-if="siftIndex==3" class="Type-box">
							<view :class="typeIndex==index?'active':''" v-for="(item,index) in typeList[1]" :key="index"
								@click="typeChange(item,index)">
								{{item}}
							</view>
						</view>
					</view>
					<view class="right">
						<view :class="siftIndex==0?'active':''" @click="siftIndex=0">
							<view class="boxc"></view> {{exteriorList[0]}}
						</view>
						<view :class="siftIndex==1?'active':''" @click="siftIndex=1">
							<view class="boxc"></view> {{qualityList[0]}}
						</view>
						<view :class="siftIndex==2?'active':''" @click="siftIndex=2">
							<view class="boxc"></view> {{rarityList[0]}}
						</view>
						<view :class="siftIndex==3?'active':''" @click="siftIndex=3">
							<view class="boxc"></view> {{typeList[0]}}
						</view>
					</view>
				</view>
				<view class="sift-bottom">
					<button class="reset" @click="reset">重置</button>
					<button class="sure" @click="sure">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		http,
		uploadFile
	} from '@/api/index.js'
	import tabbar from '../../components/tabbar.vue';
	import announcement from '../../components/announcement.vue';
	import swiperWapper from '../../components/swiper.vue';
	export default {
		data() {
			return {
				// 筛选弹窗开关
				siftShow: false,
				searchText: '',
				listData: [],
				//分类tab下标
				siftIndex: 0,
				//外观
				exteriorList: [],
				exteriorName: "",
				exteriorIndex: -1,
				// 类别
				qualityList: [],
				qualityName: "",
				qualityIndex: -1,
				//品质
				rarityList: [],
				rarityName: "",
				rarityIndex: -1,
				//分类
				typeList: [],
				typeName: "",
				typeIndex: -1,
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		components: {
			tabbar,
			announcement,
			swiperWapper
		},
		onShow() {
			this.getList("")
			this.getCate()

		},
		created() {
			this.getSetting()
		},
		methods: {
			//获取网站配置
			getSetting() {
				http.post('/api/index/getSetting').then(res => {
					document.documentElement.style.setProperty('--bg-color', res.theme_color);
					document.documentElement.style.setProperty('--text-color', res.font_color);

				}).catch(err => {
					console.log(err);
				})
			},
			//用户按回车键，或者手机键盘右下角的"搜索"键时触发
			search() {
				this.getList(this.searchText)
			},
			//输入框失去焦点时触发
			blur() {
				this.getList(this.searchText)
			},
			//获取列表数据
			getList(itemName, itemExteriorName, itemQualityName, itemRarityName, itemTypeName) {
				http.post('/api/market/index', {
					page: 1,
					limit: 50,
					itemName: itemName,
					itemExteriorName: itemExteriorName,
					itemQualityName: itemQualityName,
					itemRarityName: itemRarityName,
					itemTypeName: itemTypeName
				}).then(res => {
					this.listData = res.data;
				}).catch(err => {

				})
			},
			//饰品种类页
			go_detailType(item, index) {
				uni.navigateTo({
					url: "/pages/market/detailType/detailType?id=" + item.id
				})
			},
			//获取饰品分类，外观，类别,品质
			getCate() {
				http.post('/api/index/getCate').then(res => {
					this.exteriorList = res.itemExteriorName
					this.qualityList = res.itemQualityName
					this.rarityList = res.itemRarityName
					this.typeList = res.itemTypeName
				}).catch(err => {

				})
			},
			//点击筛选
			openSift() {
				this.siftOpen()
			},
			//打开筛选弹窗
			siftOpen() {
				this.siftShow = true
			},
			//关闭筛选弹窗
			siftClose() {
				this.siftShow = false
			},
			//弹窗返回
			siftBack() {
				this.siftClose()
			},
			//外观
			exteriorChange(item, index) {
				if (this.exteriorIndex == index) {
					this.exteriorIndex = -1
					this.exteriorName = ""
					return
				}
				this.exteriorIndex = index
				this.exteriorName = item
			},
			//类别
			qualityChange(item, index) {
				if (this.qualityIndex == index) {
					this.qualityIndex = -1
					this.qualityName = ""
					return
				}
				this.qualityIndex = index
				this.qualityName = item
			},
			//品质
			rarityChange(item, index) {
				if (this.rarityIndex == index) {
					this.rarityIndex = -1
					this.rarityName = ""
					return
				}
				this.rarityIndex = index
				this.rarityName = item
			},
			//分类
			typeChange(item, index) {
				if (this.typeIndex == index) {
					this.typeIndex = -1
					this.typeName = ""
					return
				}
				this.typeIndex = index
				this.typeName = item
			},
			//重置
			reset() {
				this.getList("")
				this.siftClose()
				this.exteriorIndex = -1
				this.qualityIndex = -1
				this.rarityIndex = -1
				this.typeIndex = -1
			},
			//确定
			sure() {
				this.getList("", this.exteriorName, this.qualityName, this.rarityName, this.typeName)
				this.siftClose()
			}
		}
	}
</script>

<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.market-page {
		width: 100%;
		height: 100vh;
		background-color: var(--bg-color);
		color: var(--text-color);

		>.title {
			width: 95%;
			height: 80rpx;
			line-height: 100rpx;
			font-weight: bold;
			font-size: 36rpx;
			margin: auto;
		}

		.main {
			width: 95%;
			height: calc(100% - 220rpx);
			margin: auto;
			overflow-y: scroll;

			.search-box {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;

				.sift {
					width: 45rpx;
					height: 45rpx;
					margin-left: 30rpx;
					background-image: url("../../static/index/sift.svg");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}
			}

			.list-box {
				width: 100%;
				height: auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.title {
					width: 100%;
					height: 80rpx;
					line-height: 100rpx;
					margin: auto;
					display: flex;
					justify-content: space-between;

					.text {
						font-weight: bold;
						font-size: 36rpx;
					}

					.more {
						font-size: 26rpx;
						color: #999999;
					}
				}

				.list-item {
					width: 48%;
					height: 350rpx;
					margin-top: 30rpx;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;

					.image-box {
						width: 100%;
						height: 230rpx;
						background-image: radial-gradient(#969696, #4c4c4c);
						display: flex;
						justify-content: center;
						align-items: center;

						>.img {
							width: 70%;
							height: 70%;
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}
					}

					.info {
						width: 100%;
						height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.name {
							font-size: 28rpx;
							white-space: nowrap;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.msg {
							display: flex;
							justify-content: space-between;

							.price {
								color: #EEA20E;
								font-weight: bold;
								font-size: 28rpx;
							}

							.num {
								font-size: 26rpx;
								color: #959595;
								font-weight: bold;
							}
						}
					}
				}
			}
		}

		.siftBox {
			width: 350px;
			height: 100%;
			display: flex;
			flex-direction: column;
			background-color: var(--bg-color);


			.sift-top {
				width: 100%;
				height: 100rpx;
				text-align: center;
				border-bottom: 1px solid #ccc;
				line-height: 100rpx;
				font-size: 34rpx;
				font-weight: bold;
				position: relative;

				.back {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					left: 10rpx;
					top: 30rpx;
					background-image: url("../../static/leftArrow_black.svg");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}
			}

			.sift-main {
				width: 100%;
				height: calc(100% - 200rpx);
				display: flex;

				.left {
					width: 70%;
					height: 100%;

					>view {
						width: 100%;
						height: 100%;
						box-sizing: border-box;


						>view {
							width: 80%;
							height: 90rpx;
							background-color: var(--text-color);
							margin: auto;
							margin-top: 20rpx;
							text-align: center;
							line-height: 90rpx;
							font-size: 30rpx;
							color: var(--bg-color);
						}

						.active {
							background-color: #8f8f8f;
							color: var(--bg-color);
						}
					}
				}

				.right {
					width: 30%;
					height: 100%;
					background-color: #f3f3f3;

					>view {
						width: 100%;
						height: 120rpx;
						text-align: center;
						line-height: 120rpx;
						color: var(--bg-color);

						>view {
							background-color: var(--text-color);
						}
					}

					.active {
						background-color: white;
						position: relative;

						.boxc {
							width: 10rpx;
							height: 30rpx;
							background-color: black;
							position: absolute;
							left: 0;
							top: calc(50% - 15rpx);
						}
					}
				}
			}

			.sift-bottom {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				border-top: 1px solid #ccc;

				>button {
					width: 240rpx;
					height: 70rpx;
					font-size: 30rpx;
				}

				.reset {
					background-color: #e3e5e6;
					color: black;
				}

				.reset:active {
					background-color: #333333;
					color: white;
				}

				.sure {
					background-color: #333333;
					color: white;
				}

				.sure:active {
					background-color: #e3e5e6;
					color: black;
				}
			}
		}
	}
</style>